/*
 * @Author: 史许荣
 * @Date: 2022-08-01 10:57:57
 * @LastEditors: 史许荣
 * @LastEditTime: 2022-08-01 13:37:15
 * @Description: file content
 * @FilePath: \react-three-fiber-new\src\HandT.js
 */
import React, { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Html } from '@react-three/drei'

export default function HandT({ value, position,type }) {
    const ref = useRef()
    useFrame((state) => {
        const t = state.clock.getElapsedTime()
        ref.current.position.y = (position[1] + Math.sin(t / 1.5)) 
      })
    return (<group ref={ref} position={position}>
            <mesh>
                <Html rotation={[Math.PI ,0, Math.PI]} transform >
                    <div className={'HandT'}>
                        <div className={type}></div>
                        <div>{type=='H'?'温度':'湿度'}</div>
                        <div>{value} {type=='H'?'℃':'%'}</div>
                    </div>
                </Html>
            </mesh>
        </group>
    )
}